<template>
	<view class="app-login">
		<image :src="comm_img_url+'/pro/account-bg-top.png'" class="bg-top"></image>
		<view class="login">
			<view class="login-title">
				忘记密码
			</view>
			<view class="tips-line"></view>
			<view class="mode flex-box">
				<input type="number" v-model="input.tel" maxlength="11" class="box-1" placeholder="请输入11位手机号" />
			</view>
			<view class="mode flex-box">
				<input type="text" v-model="input.auth_code" class="box-1" maxlength="6" placeholder="输入验证码" />
				<!-- <u-verification-code :seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
				<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
				<text class="getcode" @tap="getAuthCode">{{code_text}}</text>
			</view>
			<view class="mode flex-box">
				<input type="password" v-model="input.pwd" class="box-1" placeholder="8到20位字母加数字组合" />
			</view>
			<view class="mode flex-box">
				<input type="password" v-model="pwd2" class="box-1" placeholder="确认登录密码" />
			</view>
			<button hover-class="none" class="btn" :disabled="is_loading" :loading="is_loading" @tap="sendForget">确认修改</button>
			<view class="flex-box btn-nav">
				<text @tap="$u.route({type:'navigateBack'})">去登录</text>
			</view>
		</view>
		<image :src="comm_img_url+'/pro/account-bg-bottom.png'" class="bg-bottom"></image>
	</view>
</template>

<script>
	// import app from "@/common/js/comm_url.js";
	export default {
		data() {
			return {
				seconds: 60,
				comm_img_url: '',
				is_loading: false,
				input: {
					tel: '',
					auth_code: '',
					pwd: '',
				},
				pwd2: '',
				code_text: '获取验证码',
			};
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
		},
		methods: {
			getAuthCode() {
				if (!this.input.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$u.api.smsCode({
							flag: 'forget',
							tel: this.input.tel
						})
						.then(res => {
							if (res.status) {
								this.$refs.uCode.start();
								return
							}
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						})
						.catch(err => {
							console.log(err);

						})
				}
			},
			codeChange(text) {
				this.code_text = text;
			},
			checkingNull() {
				if (!this.input.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入您的手机号码'
					})
					return false
				}
				if (!this.$u.test.mobile(this.input.tel)) {
					uni.showToast({
						icon: 'none',
						title: '您输入的手机号码有误'
					})
					return false
				}
				if (!this.input.auth_code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				if (!this.$u.test.code(this.input.auth_code, 6)) {
					uni.showToast({
						icon: 'none',
						title: '验证码有误'
					})
					return false
				}
				if (!this.input.pwd) {
					uni.showToast({
						icon: 'none',
						title: '请输入登录密码'
					})
					return false
				}
				if (!/^(?![0-9]*$)[a-zA-Z0-9\W]{8,20}$/.test(this.input.pwd)) {
					uni.showToast({
						icon: 'none',
						title: '登录密码过于简单'
					})
					return false;
				}
				if (!this.pwd2) {
					uni.showToast({
						icon: 'none',
						title: '请确认登录密码'
					})
					return false;
				}
				if (this.input.pwd != this.pwd2) {
					uni.showToast({
						icon: 'none',
						title: '两次登录密码不一致'
					})
					return false;
				}
				return true
			},
			sendForget() {
				if (!this.checkingNull()) return;
				this.is_loading = true
				this.$u.api.doForget(this.input).then(res => {
						this.is_loading = false
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						if (res.status) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
					.catch(err => {
						console.log(err);
						this.is_loading = false
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
			}
		}
	}
</script>

<style lang="less">
	// @import url('@/common/css/comm.less');

	page {
		background:#fff;
		.btn {
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(to right,#e9d2fa,#be8ff0);
			color: #fff;
			border-radius: 50rpx;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			margin:30rpx auto;
		}
	}

	.tips-line {
		width: 130rpx;
		height: 8rpx;
		margin: 10rpx auto 30rpx;
		

	}
	.bg-top {
		position: absolute;
		top: 0;
		right: 0;
		width: 396rpx;
		height: 432rpx;
		z-index: -1;
	}

	.bg-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 304rpx;
		height: 370rpx;
		z-index: -1;
	}

	.btn-nav {
		padding: 40rpx 0;
		justify-content: center;
		font-size:30rpx;
	}

	.login {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -40%);
	}

	.app-login {
		padding: 30rpx;
		position: relative;
		z-index: 1;
		min-height: 100vh;

		// button {
		// 	margin: 100rpx auto 0;
		// 	background: linear-gradient(270deg, #4bb596 0%, #70c8ae 63%, #94dbc6 100%);

		// }

		.mode {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEEEEE;

			.getcode {
				min-width: 160rpx;
				text-align: center;
				border-left: 1px solid #EEEEEE;
				padding-left: 20rpx;
				
			}
		}

		.login-title {
			font-size:48rpx;
			font-weight: bold;
			text-align: center;
		}
	}
</style>
